<template>
  <div class="login-container">
    <div class="logo">
      <img src="/static/images/logo1.png" alt>
    </div>

    <div class="form">
      <form action>
        <div class="box">
          <p class="label">用户名</p>
          <el-input class="input" v-model="user.userName" clearable placeholder="请输入账号"></el-input>
        </div>

        <div class="box box2">
          <p class="label label2">密码</p>
          <div class="space-between">
            <el-input
              class="input input2"
              v-model="user.password"
              type="password"
              clearable
              placeholder="请输入密码"
            ></el-input>
            <router-link class="link" to="/forgetPassword">忘记密码</router-link>
          </div>
        </div>

        <el-button
          type="primary"
          class="submit-btn"
          :disabled="disabled"
          round
          @click="goLogin()"
        >登录</el-button>
        <p class="go-phone">
          <!-- <router-link to="">
            短信验证码登录
          </router-link>-->
        </p>
        <p class="text">登录即代表已经同意
          <a href>《还美医疗整形隐私政策》</a>
        </p>
      </form>
    </div>
  </div>
</template>

<script>
import { Toast } from "mint-ui";
import constant from '@/util/constant'
import http from '@/util/http'
export default {
  name: "index",
  data() {
    return {
      user: {
        userName: "",
        password: ""
      }
    };
  },
  computed: {
    disabled() {
      if (this.user.password == "") {
        return true;
      } else {
        return false;
      }
    }
  },
  created() {},
  mounted() {},
  methods: {
    goLogin() {
      if (this.user.userName == "") {
        Toast({
          message: "用户名不能为空",
          position: "middle"
        });
        return false;
      } else if (this.user.password == "") {
        Toast({
          message: "密码不能为空",
          position: "middle"
        });
        return false;
      } else {
        //接口
        http.post(this, {
          url: "passport/login",
          data: {
            username: this.user.userName,
            password: this.user.password
          },
          dataType: "json",
          success: function(data) {
            console.log("登录:", data);
            if (data.status == 1) {
              let user_info = data.info;
              localStorage.setItem("user_name", user_info.username);
              localStorage.setItem("user_token", user_info.token);
              localStorage.setItem("user_head", user_info.headimgurl);
              this.$router.push({
                //核心语句
                path: "/userCenter"
              });
            } else {
              Toast({
                message: data.info,
                position: "middle"
              });
            }
          }
        });
      }
    }
  }
};
</script>

<style lang="less" scoped>
.login-container {
  background: #fff;
  padding: 34/37.5rem 0;
  .logo {
    width: 244/37.5rem;
    margin: 0 auto 53/37.5rem;
    img {
      width: 100%;
    }
  }
  .form {
    padding: 0 65/37.5rem;
    .box {
      margin: 0 35/37.5rem;
      border-bottom: 1px solid #ddd;
      .label {
        font-size: 36/37.5rem;
        color: #666;
        padding-left: 0.3rem;
      }
      .input2 {
        width: 72%;
      }
      .link {
        font-size: 24/37.5rem;
        color: #666;
        width: 140/37.5rem;
        height: 100%;
        margin-top: 0.7rem;
        text-align: right;
        position: relative;
        padding-right: 0.5rem;
        &:before {
          content: "";
          border-left: 1px solid #ddd;
          height: 20px;
          position: absolute;
          left: 0;
          top: -2px;
        }
      }
    }
    .box2 {
      margin-top: 1rem;
    }
    .submit-btn {
      width: 627/37.5rem;
      height: 80/37.5rem;
      margin-top: 95/37.5rem;
      font-size: 34/37.5rem;
    }
    .go-phone {
      padding: 0 35/37.5rem;
      font-size: 24/37.5rem;
      margin: 0.6rem 0 1.5rem;
      display: block;
      a {
        color: #888;
      }
    }
    .text {
      text-align: center;
      font-size: 24/37.5rem;
      color: #bbb;
      a {
        color: #409eff;
      }
    }
  }
}
</style>
<style>
.login-container .box input {
  border: none !important;
  font-size: 36/37.5rem !important;
  color: #666 !important;
  padding: 0 0.3rem !important;
}
</style>